<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tree_Basic</title>
    <link rel="stylesheet" type="text/css" href="/easyui.css">
    <link rel="stylesheet" type="text/css" href="/icon.css">
    <link rel="stylesheet" type="text/css" href="/demo.css">
    <script src="/jquery.min.js"></script>
    <script src="/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic Tree</h2>
<p>Click the arrow on the left to expand or collapse nodes.</p>
<div style="margin:20px 0;"></div>
<ul id="tt"></ul>
<script type="text/javascript">
    var a = [{
            "id":1,
            "text":"My Documents",
            "children":[{
                "id":11,
                "text":"Photos",
                "state":"closed",
                "children":[{
                    "id":111,
                    "text":"Friend"
                },{
                    "id":112,
                    "text":"Wife"
                },{
                    "id":113,
                    "text":"Company"
                }]
            },{
                "id":12,
                "text":"Program Files",
                "children":[{
                    "id":121,
                    "text":"Intel"
                },{
                    "id":122,
                    "text":"Java",
                    "attributes":{
                        "p1":"Custom Attribute1",
                        "p2":"Custom Attribute2"
                    }
                },{
                    "id":123,
                    "text":"Microsoft Office"
                },{
                    "id":124,
                    "text":"Games",
                    "checked":true
                }]
            },{
                "id":13,
                "text":"index.html"
            },{
                "id":14,
                "text":"about.html"
            },{
                "id":15,
                "text":"welcome.html"
            }]
        }];
    $("#tt").tree({
        data:a
    });
</script>

</body>
</html>